<template>
	<view class="container">
		<!-- 内容区域 -->
		<view class="header">
			<image :src="$xyfun.image('/static/tennis-background.png')" class="background-image" mode="aspectFill" />
		</view>

		<view class="ranking-section">
			<view class="ranking-header">
				<view class="title-section">
					<view class="color-marker"></view>
					<text class="title">排行榜</text>
				</view>
				<view class="tab-switch">
					<button class="tab-button" :class="{active: currentTab === '当前门店'}"
						@tap="switchTab('当前门店')">当前门店</button>
					<button class="tab-button" :class="{active: currentTab === '全省门店'}"
						@tap="switchTab('全省门店')">全省门店</button>
				</view>
			</view>

			<view class="ranking-list">
				<view class="rank-item" v-for="(item, index) in rankingList" :key="index">
					<view class="rank-number">
						<text :style="item.color" v-if="index < 3">NO.{{ item.rank }}</text>
						<text v-else>0{{ item.rank }}</text>
					</view>
					<view class="player-info">
						<image :src="$xyfun.image('/static/player_icon.png')" class="player-icon"></image>
						<text class="player-name">{{ item.name }}</text>
					</view>
					<view class="player-score-section">
						<image :src="$xyfun.image('/static/score_icon.png')" class="score-icon"></image>
						<text class="player-score">{{ item.score }}</text>
					</view>
				</view>
			</view>
			<view class="logout-button" @click="logout">
				<text class="logout-text">退出登录</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import xyTabbar from '@/components/xy-tabbar';

	export default {
		components: {
			xyTabbar,
		},
		data() {
			return {
				user: {
					isLogin: false,
					info: {
						avatar: '',
						nickname: '',
					},
				},
				members: [],
				currentTab: '当前门店',
				rankingList: [],
				store_id: 0,
				refreshTimer: null,
				isLoading: true,
				storeInfo: {},
				lat: 0,
				lng: 0,
				isLoginAvatar: '',
			};
		},
		computed: {
			...mapState(['common']),
			// ...mapState(['user'])
		},
		onLoad(options) {
			
			// const storeData = ;
			// console.log("sdfa:"+ );
		},
		onShow() {
			
			this.$xyfun.setNavBg();
			this.css = this.$xyfun.css();
			this.$xyfun.loc().then((res) => {
				this.lat = res.latitude;
				this.lng = res.longitude;
				this.loadData();
			}, () => {
				this.loadData();
			});
			this.checkLoginStatus();
			this.loadMembers();
			this.checkStoreId();
			
		},
		methods: {
			// 检查是否有store_id
			checkStoreId() {
				const storeId = uni.getStorageSync('store_id');
				console.log("hhhhyyy:" + storeId);
				if (storeId) {
					this.store_id = storeId;
				} else if(this.user.isLogin){
					this.store_id = this.user.store_id;
				}else{
					// 提示用户登录并跳转到登录页面
					uni.navigateTo({
						url: '/pages/bigscreen/login',
					});
				}
					
					
					// setTimeout(() => {
					// 	uni.showToast({
					// 		title: '请先登录',
					// 		icon: 'none'
					// 	});
					// }, 500)
				
			},
			// 退出登录
			logout() {
				// 清除所有本地存储
				uni.clearStorageSync();
				this.user.isLogin = false;
				// this.store_id = null;
				uni.navigateTo({
					url: '/pages/bigscreen/login',
				});
			},
			// 检查登录状态
			checkLoginStatus() {
				const user = uni.getStorageSync('xyvenue:user');
				if (user && user.id) {
					this.user.isLogin = true;
					this.user.info = {
						avatar: user.avatar || '',
						nickname: user.nickname || '',
					};
				} else {
					this.user.isLogin = false;
				}
			},
			loadData() {
				this.$api.get({
					url: '/common/index',
					data: {
						store_id: this.store_id
					},
					success: res => {
						uni.stopPullDownRefresh();
						// this.$xyfun.setNavTitle(res.storeInfo.name);
						this.isLoading = false;
						this.storeInfo = res.storeInfo;
						this.rechargeList = res.rechargeList;
						this.noticeList = res.noticeList;
					},
				});
			},
			loadMembers() {
				this.$api.post({
					url: '/member/listsByScore',
					data: {
						store_id: this.store_id
					},
					success: (res) => {
						uni.stopPullDownRefresh();
						this.isLoading = false;
						this.members = res.data;
						this.rankingList = this.members.map((member, index) => ({
							rank: index + 1,
							name: member.nickname,
							score: member.score,
							color: index < 3 ? this.getRankColor(index) : '',
						}));
					},
				});
			},
			getRankColor(index) {
				const colors = [
					'color:#FF0000;font-weight:bold',
					'color:#FF6600;font-weight:bold',
					'color:#FFAE00;font-weight:bold',
				];
				return colors[index] || '';
			},
			switchTab(tab) {
				this.currentTab = tab;

				if (this.refreshTimer) {
					clearInterval(this.refreshTimer);
				}

				if (tab === '当前门店') {
					this.loadMembers();
				} else {
					this.loadProvinceMembers();
				}

				this.refreshTimer = setInterval(() => {
					if (this.currentTab === '当前门店') {
						this.loadMembers();
					} else {
						this.loadProvinceMembers();
					}
				}, 3000);
			},
			loadProvinceMembers() {
				this.$api.post({
					url: '/member/listsByProvince',
					data: {
						store_id: this.store_id
					},
					success: (res) => {
						uni.stopPullDownRefresh();
						this.isLoading = false;
						this.rankingList = res.map((member, index) => ({
							rank: index + 1,
							name: member.nickname,
							score: member.score,
							color: index < 3 ? this.getRankColor(index) : '',
						}));
					},
				});
			},
		},
		beforeDestroy() {
			if (this.refreshTimer) {
				clearInterval(this.refreshTimer);
			}
		},
	};
</script>


<style lang="scss" scoped>
	/* 页面整体样式 */
	.container {
		display: flex;
		flex-direction: column;
		background-color: #f1f1f1;
		min-height: 100vh;
		/* 至少占满整个视口高度 */
	}


	/* 顶部背景与文字 */
	.header {
		position: relative;
		// height: 800rpx;
		// background-color: #000;
	}

	.background-image {
		width: 100%;
		/* 宽度自适应 */
		height: 85vw;
		/* 高度根据宽度动态调整， */
		object-fit: cover;
		/* 保证不变形，填充容器 */
	}



	.spacing-container {
		height: 20px;
		background-color: #888;
	}

	.header-content {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		text-align: center;
		color: #fff;
	}

	.title {
		font-size: 32rpx;
		font-weight: bold;
	}

	.subtitle {
		font-size: 28rpx;
		color: #33ff33;
		margin: 10rpx 0;
	}

	.description {
		font-size: 24rpx;
		color: #fff;
	}

	.tennis-ball {
		position: absolute;
		width: 80rpx;
		height: 80rpx;
		bottom: 0;
		right: 50rpx;
	}

	/* 场馆信息 */
	.venue-info {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx;
		margin: 10px;
		background-color: #fff;
		border-radius: 20rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
	}

	/* 修改 venue-left 靠右 */
	.venue-left {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: flex-end;
	}

	.venue-row {
		display: flex;
		align-items: center;
	}

	.switch-wrapper {
		display: flex;
		align-items: center;
		margin-right: 10rpx;
	}

	.label {
		font-size: 24rpx;
		color: #666;
	}

	.switch-text {
		font-size: 30rpx;
		color: #007aff;
	}

	.arrow-icon {
		width: 25rpx;
		height: 25rpx;
	}

	.venue-name {
		// font-size: 32rpx;
		font-weight: bold;
		color: #333;
		// margin-top: 50rpx;
		margin-right: 50rpx;
	}

	/* 中间分隔线 */
	.divider {
		width: 2rpx;
		height: 60rpx;
		background-color: #ddd;
		margin: 0 20rpx;
	}

	/* 右侧营业时间与图标 */
	.venue-right {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}

	.business-hours {
		font-size: 24rpx;
		color: #333;
	}

	.contact-icons {
		display: flex;
		margin-top: 10rpx;

		image {
			width: 40rpx;
			height: 40rpx;
			margin: 2px;
		}
	}

	.icon-button {
		width: 40rpx;
		height: 40rpx;
		margin-left: 10rpx;

		image {
			width: 40rpx;
			height: 40rpx;
		}
	}

	.phone {
		background: url('/static/weixin.png') no-repeat center;
		background-size: contain;
	}

	.chat {
		background: url('/static/weixin.png') no-repeat center;
		background-size: contain;
	}

	.location {
		background: url('/static/weixin.png') no-repeat center;
		background-size: contain;
	}

	/* 功能按钮与大图 */
	.features {
		display: flex;
		align-items: center;
		justify-content: space-between;
		// margin-top: 20rpx;
		background-color: #fff;
		padding: 20rpx;
		border-radius: 20rpx;
		margin: 0 10px;
	}

	.feature-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		flex: 1;
	}

	.feature-icon {
		width: 80rpx;
		height: 80rpx;
		margin-bottom: 5rpx;
	}

	.feature-text {
		font-size: 24rpx;
		color: #333;
		margin-bottom: 5rpx;
	}

	.feature-pinyin {
		font-size: 20rpx;
		color: #999;
	}

	.center-image {
		width: 200rpx;
		height: 200rpx;
		margin: 0 10rpx;
	}

	/* 其他功能按钮 */
	.other-features {
		display: flex;
		justify-content: space-around;
		margin-top: 20rpx;
		background-color: #fff;
		padding: 20rpx;
		border-radius: 20rpx;
	}

	.ranking-section {
		z-index: 999;
		// position: absolute;
		// top: 280px;
		// left: 50%;
		// transform: translateX(-50%);
		position: relative;
		margin: 0 auto;
		margin-top: -100rpx;
		width: 85%;
		background: rgba(255, 255, 255, 0.8);
		/* 半透明背景，避免影响背景图 */
		border-radius: 10px;
		padding: 15px;
		box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
	}

	.left {
		display: flex;
	}

	.profile-image {
		width: 80rpx;
		height: 80rpx;
	}

	.register-info {
		display: flex;
		flex-direction: column;
		/* 设置垂直排列 */
		align-items: flex-start;
		/* 文字左对齐 */
		margin-left: 20rpx;
		/* 可根据需求设置左边距 */
	}

	.main-info {
		font-size: 28rpx;
		/* 主文字较大字体 */
		font-weight: bold;
		/* 加粗文字 */
		color: #000;
		/* 主文字颜色 */
		margin-bottom: 10rpx;
		/* 增加主文字与次文字的间距 */
	}

	.sub-info {
		font-size: 22rpx;
		/* 次文字较小字体 */
		color: #888;
		/* 次文字颜色 */
	}


	.register-button {
		width: 50rpx;
		/* 根据图片实际尺寸设置宽度 */
		height: 50rpx;
		/* 根据图片实际尺寸设置高度 */
		margin-left: 20rpx;
		/* 为按钮图片添加间距 */
		cursor: pointer;
		/* 鼠标悬停时显示为手型（仅H5） */
	}

	.tools-section {
		display: flex;
		justify-content: space-around;
		/* 分布放置两个工具 */
		/* 将子项平分宽度 */
		width: 100%;
	}

	/* 每个工具按钮 */
	.tools-section .tool-item {
		display: flex;
		align-items: center;
		background-color: #ffffff;
		padding: 40rpx;
		border-radius: 15rpx;
		box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
		flex: 1;
		/* 让每个按钮占据相等的宽度 */
		margin: 0 15rpx;
		/* 给按钮之间添加间距 */
	}



	.tool-icon {
		width: 80rpx;
		height: 80rpx;
		margin-right: 20rpx;
		/* 图片和文字间的间距 */
	}

	.tool-text {
		display: flex;
		flex-direction: column;
		/* 文字上下排列 */
	}

	.tool-title {
		font-size: 28rpx;
		/* 标题文字大小 */
		font-weight: bold;
		/* 加粗 */
		color: #333;
	}

	.tool-subtitle {
		font-size: 22rpx;
		/* 副标题文字大小 */
		color: #888;
		margin-top: 5rpx;
		/* 标题与副标题的间距 */
	}


	.ranking-section {
		background-color: #ffffff;
	}

	.ranking-header {
		display: flex;
		flex-direction: column;
		/* 让内容垂直排列 */
		padding: 20rpx;
		background-color: #ffffff;
		/* 可选背景色 */
	}

	.title-section {
		display: flex;
		align-items: center;
		/* 垂直居中 */
		margin-bottom: 20rpx;
		/* 与 tab-switch 间距 */
	}

	.color-marker {
		width: 10rpx;
		/* 标记宽度 */
		height: 40rpx;
		/* 标记高度 */
		background-color: #00c853;
		/* 标记颜色 */
		border-radius: 5rpx;
		/* 圆角 */
		margin-right: 10rpx;
		/* 与标题文字间距 */
	}

	.title {
		font-size: 32rpx;
		/* 标题字体大小 */
		font-weight: bold;
		/* 标题加粗 */
		color: #333333;
	}

	.tab-switch {
		display: flex;
		justify-content: flex-start;
		/* 按钮靠左排列 */
		gap: 20rpx;
		/* 按钮之间的间距 */
		padding: 20rpx;
		/* 设置内边距 */
		width: 200px;
	}

	.tab-button {
		font-size: 28rpx;
		/* 按钮文字大小 */
		color: #666666;
		/* 默认字体颜色 */
		background: none;
		/* 去除背景 */
		border: none !important;
		/* 去除边框 */
		padding: 0 20rpx;
		/* 内边距控制按钮大小 */
		cursor: pointer;
	}

	.tab-button.active {
		font-weight: bold;
		/* 激活时加粗 */
		color: #333333;
		/* 激活时的文字颜色 */
		background-color: #e0e0e0;
		/* 激活时的背景色为灰色 */
		border-radius: 8rpx;
		/* 激活按钮的圆角效果 */
	}

	.ranking-list {
		display: flex;
		flex-direction: column;

		/* 列表垂直排列 */
		gap: 20rpx;
		/* 每个项目之间的间距 */
		padding: 20rpx;
	}

	.rank-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10rpx 20rpx;
		border-radius: 10rpx;
	}

	.rank-number {
		display: flex;
		align-items: center;
		/* 垂直居中 */
		width: 100rpx;
		/* 固定宽度 */
	}

	.rank-icon {
		width: 40rpx;
		/* 排名图片宽度 */
		height: 40rpx;
		/* 排名图片高度 */
	}

	.player-info {
		display: flex;
		align-items: center;
		/* 垂直居中 */
		gap: 10rpx;
		/* 图片与文字间的间距 */
		flex: 1;
		/* 占据剩余宽度 */
	}

	.player-icon {
		width: 40rpx;
		/* 玩家头像宽度 */
		height: 40rpx;
		/* 玩家头像高度 */
	}

	.player-name {
		font-size: 28rpx;
		/* 玩家姓名字体大小 */
		font-weight: bold;
		color: #333;
	}

	.player-score-section {
		display: flex;
		align-items: center;
		/* 垂直居中 */
		justify-content: center;
		/* 内容靠左对齐 */
		gap: 10rpx;
		/* 图片和文字间距 */
	}

	.score-icon {
		width: 40rpx;
		/* 图标宽度 */
		height: 40rpx;
		/* 图标高度 */
		margin-right: 10rpx;
		/* 图标与文字的额外右边距 */
		flex-shrink: 0;
		/* 防止图标缩小 */
	}

	.player-score {
		font-size: 28rpx;
		/* 分数字体大小 */
		color: #666666;
		white-space: nowrap;
		/* 防止分数换行 */
		flex-shrink: 0;
		/* 防止分数文字缩小 */
		width: 25px;
	}

	/* 退出登录按钮 */
	.logout-button {
		position: absolute;
		top: 20px;
		right: 20px;
		padding: 6px 12px;
		background-color: #FFAE00;
		color: #fff;
		border-radius: 20px;
		cursor: pointer;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
		display: flex;
		/* 启用 Flexbox 布局 */
		align-items: center;
		/* 垂直居中 */
		justify-content: center;
		/* 水平居中 */
	}

	.logout-button .logout-text {
		font-size: 10px;
		font-weight: bold;
	}
</style>